import React, { memo, useEffect, useState, useRef } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { NavLink } from "react-router-dom";
import {
  subCountAction,
  artistSublistAction,
  mvSublistAction,
  loginStatusAction,
} from "../store/actionTypes";
import { MyMusicLeft } from "./style";

import UserPlayLists from "./userPlayList";

export default memo(function MyLeft() {
  const [creBoo, setCreBoo] = useState(false);
  const [collageBoo, setCollageBoo] = useState(true);
  const dispatch = useDispatch();
  const collageRef = useRef();
  const creRef = useRef();

  useEffect(() => {
    dispatch(artistSublistAction());
    dispatch(mvSublistAction());
    dispatch(subCountAction());
  }, [dispatch]);

  const state = useSelector(
    (state) => ({
      myInfo: state.getIn(["myMusicInfo", "subcountInfo"]),
    }),
    shallowEqual
  );

  const creSong = () => {
    setCreBoo(!creBoo);
    if (!creBoo) {
      creRef.current.style.display = "none";
    } else {
      creRef.current.style.display = "block";
    }
  };
  const collageSong = () => {
    setCollageBoo(!collageBoo);
    if (!collageBoo) {
      collageRef.current.style.display = "none";
    } else {
      collageRef.current.style.display = "block";
    }
  };

  return (
    <MyMusicLeft>
      <div className="scrollDiv">
        <NavLink
          to={{
            pathname: "/mymusic/myArtist",
          }}
          className="syl gs"
        >
          我的歌手({state.myInfo.artistCount})
        </NavLink>
        <NavLink
          to={{
            pathname: "/mymusic/myMv",
          }}
          className="syl sp"
        >
          我的视频({state.myInfo.mvCount})
        </NavLink>
        <div className="syl createSong">
          <div className="songbox">
            <span className="cre-song">
              <div onClick={creSong} className="cre-div">
                <i className="tri tri1"></i>
                创建的歌单({state.myInfo.createdPlaylistCount})
              </div>
              <a className="create-playlist btn-button" href="#/">
                <i>新建</i>
              </a>
            </span>
            <div ref={creRef}>
              <UserPlayLists num={[0, state.myInfo.createdPlaylistCount]} />
            </div>
          </div>
        </div>
        <div className="syl createSong collage">
          <div className="songbox">
            <span className="cre-song">
              <div onClick={collageSong} className="cre-div">
                <i className="tri tri1"></i>
                收藏的歌单({state.myInfo.subPlaylistCount})
              </div>
            </span>
          </div>
          <div className="u" ref={collageRef}>
            <UserPlayLists
              num={[
                state.myInfo.createdPlaylistCount,
                state.myInfo.subPlaylistCount +
                  state.myInfo.createdPlaylistCount,
              ]}
            />
          </div>
        </div>
        <div style={{ height: "100px" }}></div>
      </div>
    </MyMusicLeft>
  );
});
